/* eslint-disable multiline-ternary */
import { Badge, Button } from 'reactstrap'
import { getStatus } from '../../utility/Utils'
import moment from 'moment'
import { useState } from 'react'
import ModalBox from '../../components/modal/ModalBox'
import { useDispatch } from 'react-redux'
import { getAllStripeCardAction } from '../../redux/stripe/stripeAction'
/* eslint-disable no-unused-vars */

export const columns = (offset, limit) => [
  {
    sortable: true,
    minWidth: '10rem',
    cell: (row) => (
      <>
        <div className="px-1">
          <Badge
            pill
            className={`${
              getStatus(parseInt(row?.status))?.class
            } padding-billing-badge`}
          >
            {getStatus(row.status)?.status}
          </Badge>
        </div>
      </>
    )
  },

  {
    sortable: false,
    minWidth: '15rem',
    cell: (row) => (
      <>
        <span>
          {row?.created_at !== null
            ? moment.unix(row?.created_at).format('MM/DD/YYYY')
            : '--'}
        </span>
      </>
    )
  },
  {
    sortable: false,
    cell: (row) => (
      <>
        <span>${row?.fees || '--'}</span>
      </>
    ),
    minWidth: '15rem'
  },
  {
    sortable: false,
    cell: (row) => {
      const dispatch = useDispatch()
      const [basicModal, setBasicModal] = useState(false)
      const [data, setData] = useState(null)

      const handleModal = (item) => {
        dispatch(getAllStripeCardAction())
        setData(item)
        setBasicModal(!basicModal)
      }
      return (
        <div>
          <Button
            style={{ whiteSpace: 'nowrap' }}
            size="sm"
            className={
              parseInt(row?.status) === 0
                ? 'BillingPayBtn fs-8 padding-billing-btn'
                : 'insurance-card-bgColor fs-8 px-2 '
            }
            disabled={parseInt(row?.status) === 0}
            onClick={() => handleModal(row)}
          >
            {parseInt(row?.status) === 0 ? 'PAID' : 'Pay now'}
          </Button>
          {/* `payment method Modal` */}
          <ModalBox
            offset={offset}
            limit={limit}
            basicModal={basicModal}
            setBasicModal={setBasicModal}
            data={data}
          />
        </div>
      )
    }
  }
]
